<template>
	<div>{{ user }}</div>
	<div>{{ x }}</div>
	<div>{{ double }}</div>
	<div>obj{{ obj }}</div>
	<div>storeX={{ storeX }}</div>
	<div><button @click="doTest">test</button></div>
</template>

<script setup lang="ts">
import {
	computed,
	ref,
	// watchEffect,
	watch,
	reactive
} from "vue";
import { useStore } from "vuex";

// const user = 'Michael'; // 非响应式
const user = ref('Michael'); // 响应式
const x = ref(1); // 响应式

const obj = reactive({ count: 0 }) // 响应式对象用reactive

const double = computed(() => x.value * 2)

// watch的定义:跟随上面double
// watchEffect(() => {
// 	console.group('watchEffect');
// 	console.log(double.value)
// 	console.groupEnd();
// })

watch(double, (count, prevCount) => {
	console.group('watch');
	console.log('count', count)
	console.log('prevCount', prevCount)
	console.groupEnd();
})

setTimeout(() => {
	user.value = 'Ray'; // 响应式的修改需要.value
	obj.count++; // 对象增加
}, 3000)

function init(x: any) {
	setTimeout(() => {
		x.value = 55;
	}, 3000)

	console.log('x', x.value)
}

init(x);

function doTest() {
	console.log('test')
}

// 组合是API中使用store
const store = useStore()

const storeX = computed(() => store.state.moduleA.x)

</script>

<style scoped>

</style>
